<template>
  <component>
    <div class="absolute-top-left text-subtitle2 img-tag">
      报告时间：{{reportTime}}
    </div>


<!--    <div class="absolute-bottom-right text-white  text-subtitle2 img-control">-->
<!--      <q-icon name="image" style="font-size: 1.2rem;"/>-->
<!--      {{current}}/{{total}}-->
<!--    </div>-->

    <template v-slot:loading>
      <div class="text-blue">
        <q-spinner-ios />
        <div class="q-mt-md">读取中...</div>
      </div>
    </template>
  </component>
</template>

<script lang='ts'>
import { defineComponent, PropType } from 'vue';

export default defineComponent( {
  name: 'ImageMessage',
  props: {
    reportTime: {
      type: String,
      required: true
    },
    current: {
      type: String,
      required: true
    },
    total: {
      type: String,
      required: true
    }
  },
  setup () {

  }
});
</script>

<style scoped lang='sass'>
.img-tag
  color: yellow
  border: yellow 1px solid
  border-radius: 1em
  height: 1em
  padding-top: 0px
  padding-bottom: 20px
  padding-left: 1em
  padding-right: 1em
  position: absolute
  top: 0.5em
  left: 0.5em
  background-color: rgba(0, 0, 0, 0.40)
.img-control
  border-radius: 3em
  background-color: rgba(0, 0, 0, 0.40)
  padding: 0.2em
</style>
